<template>
  <el-tag :type="tagType" size="small">{{ statusName || defaultStatusName }}</el-tag>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from "vue";

type TagType = "" | "success" | "warning" | "info" | "danger";

export default defineComponent({
  name: "StatusTag",
  props: {
    status: {
      type: String,
      required: true
    },
    statusName: {
      type: String,
      default: ""
    },
    statusMap: {
      type: Object as PropType<Record<string, TagType>>,
      default: () => ({
        "0": "success",
        "1": "danger"
      })
    },
    statusNameMap: {
      type: Object as PropType<Record<string, string>>,
      default: () => ({
        "0": "正常",
        "1": "已解除"
      })
    }
  },
  setup(props) {
    // 根据状态获取标签类型
    const tagType = computed<TagType>(() => {
      return props.statusMap[props.status] || "info";
    });

    // 获取默认状态名称
    const defaultStatusName = computed(() => {
      return props.statusNameMap[props.status] || "未知";
    });

    return {
      tagType,
      defaultStatusName
    };
  }
});
</script>
